<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <div class="name">
            <img src="./asset/head-sculpture.jpg" alt="">
            <span>MAOS.</span>
        </div>
        <img src="./asset/about-us.png" alt="" class="left-img">
        <div class="round"></div>
        <div class="form-wrapper">
            <div class="login-form">
                <h1 class="title">LOGIN</h1>
                <p class="tips">
                    Don't have an account?
                    <span class="tips-span regist">Register</span>
                </p>
                <div class="other-login">
                    <div class="other-login-item">
                        <svg class="other-login-svg" t="1706423206362" class="icon" viewBox="0 0 1260 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11373" width="128" height="128">
                            <path
                                d="M456.861538 0C204.8 0 0 173.292308 0 378.092308c0 118.153846 63.015385 220.553846 165.415385 291.446154 7.876923 7.876923 0 47.261538-15.753847 110.276923 0 7.876923 0 15.753846 7.876924 15.753846s7.876923 7.876923 15.753846 0c78.769231-47.261538 118.153846-70.892308 133.907692-63.015385 47.261538 15.753846 86.646154 23.630769 149.661538 23.630769h39.384616c-23.630769-31.507692-31.507692-70.892308-31.507692-102.4C464.738462 464.738462 645.907692 315.076923 866.461538 315.076923h39.384616C866.461538 141.784615 677.415385 0 456.861538 0zM307.2 322.953846c-39.384615 0-70.892308-31.507692-70.892308-63.015384s31.507692-63.015385 63.015385-63.015385 63.015385 31.507692 63.015385 63.015385-23.630769 63.015385-55.138462 63.015384z m299.323077 0c-31.507692 0-63.015385-31.507692-63.015385-63.015384s31.507692-63.015385 63.015385-63.015385 63.015385 31.507692 63.015385 63.015385-31.507692 63.015385-63.015385 63.015384z"
                                fill="#00BF5E" p-id="11374"></path>
                            <path
                                d="M1260.307692 669.538462c0-173.292308-173.292308-315.076923-378.092307-315.076924-212.676923 0-378.092308 141.784615-378.092308 315.076924s173.292308 315.076923 378.092308 315.076923c47.261538 0 78.769231-7.876923 126.030769-23.63077 7.876923 0 47.261538 15.753846 110.276923 55.138462h15.753846c7.876923 0 7.876923-7.876923 0-15.753846-15.753846-55.138462-23.630769-86.646154-15.753846-94.523077 94.523077-55.138462 141.784615-133.907692 141.784615-236.307692z m-504.123077-55.138462c-31.507692 0-55.138462-23.630769-55.138461-55.138462s23.630769-55.138462 55.138461-55.138461 55.138462 23.630769 55.138462 55.138461-31.507692 55.138462-55.138462 55.138462z m252.061539 0c-31.507692 0-55.138462-23.630769-55.138462-55.138462s23.630769-55.138462 55.138462-55.138461c31.507692 0 55.138462 23.630769 55.138461 55.138461s-23.630769 55.138462-55.138461 55.138462z"
                                fill="#00BF5E" p-id="11375"></path>
                        </svg>
                        <span>WeChat</span>
                    </div>
                    <div class="other-login-item">
                        <svg class="other-login-svg" t="1706423247752" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14028" width="128" height="128">
                            <path
                                d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
                                fill="#FAAD08" p-id="14029"></path>
                            <path
                                d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
                                fill="#FAAD08" p-id="14030"></path>
                            <path
                                d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
                                fill="#000000" p-id="14031"></path>
                            <path
                                d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
                                fill="#000000" p-id="14032"></path>
                            <path
                                d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
                                fill="#FFFFFF" p-id="14033"></path>
                            <path
                                d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
                                fill="#FAAD08" p-id="14034"></path>
                            <path
                                d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
                                fill="#000000" p-id="14035"></path>
                            <path
                                d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
                                fill="#FFFFFF" p-id="14036"></path>
                            <path
                                d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
                                fill="#EB1C26" p-id="14037"></path>
                            <path
                                d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
                                fill="#EB1C26" p-id="14038"></path>
                        </svg>
                        <span>QQ</span>
                    </div>
                </div>
                <div class="diliver"><span>or</span></div>
                <div class="form-input">
                    <div class="form-input-item">
                        <p>Email</p>
                        <input type="text" class="ipt">
                        <svg class="ipt-svg" t="1706422441211" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10013" width="128" height="128">
                            <path
                                d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"
                                p-id="10014"></path>
                        </svg>
                    </div>
                    <div class="form-input-item">
                        <p>Password</p>
                        <input type="password" class="ipt">
                        <svg class="ipt-svg" t="1706422409197" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7561" width="128" height="128">
                            <path
                                d="M804.571429 1023.975619 219.428571 1023.975619C165.571048 1023.975619 121.904762 1004.714667 121.904762 950.832762L121.904762 536.356571C121.904762 482.499048 165.571048 438.832762 219.428571 438.832762L219.428571 438.832762 219.428571 292.547048 219.428571 292.547048C219.428571 130.974476 350.403048-0.024381 512-0.024381 673.572571-0.024381 804.571429 130.974476 804.571429 292.547048L804.571429 438.832762C858.428952 438.832762 902.095238 482.499048 902.095238 536.356571L902.095238 950.832762C902.095238 1004.714667 858.428952 1023.975619 804.571429 1023.975619ZM755.809524 292.547048 755.809524 292.547048C755.809524 292.547048 755.809524 292.547048 755.809524 292.547048 755.809524 157.891048 646.631619 48.737524 512 48.737524 377.344 48.737524 268.166095 157.891048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048L268.190476 292.547048 268.190476 438.832762 755.809524 438.832762 755.809524 292.547048ZM853.333333 536.356571C853.333333 509.44 831.488 487.594667 804.571429 487.594667L219.428571 487.594667C192.487619 487.594667 170.666667 509.44 170.666667 536.356571L170.666667 950.832762C170.666667 977.773714 192.487619 975.213714 219.428571 975.213714L804.571429 975.213714C831.488 975.213714 853.333333 977.773714 853.333333 950.832762L853.333333 536.356571ZM536.380952 801.109333 536.380952 877.714286C536.380952 891.172571 525.458286 902.095238 512 902.095238 498.541714 902.095238 487.619048 891.172571 487.619048 877.714286L487.619048 801.109333C445.635048 790.235429 414.47619 752.420571 414.47619 707.023238 414.47619 653.165714 458.142476 609.499429 512 609.499429 565.857524 609.499429 609.52381 653.165714 609.52381 707.023238 609.52381 752.420571 578.364952 790.235429 536.380952 801.109333ZM512 658.261333C485.059048 658.261333 463.238095 680.106667 463.238095 707.023238 463.238095 733.96419 485.059048 755.809524 512 755.809524 538.916571 755.809524 560.761905 733.96419 560.761905 707.023238 560.761905 680.106667 538.916571 658.261333 512 658.261333Z"
                                p-id="7562"></path>
                        </svg>
                    </div>
                    <button class="btn">Login</button>
                </div>
                <div class="forgot-pwd">Forgot Password?</div>
            </div>
            <div class="regite-form">
                <h1 class="title">REGISTER</h1>
                <p class="tips">
                    Already have an count?
                    <span class="tips-span sigin">Sigin in</span>
                </p>
                <div class="form-input">
                    <div class="form-input-item">
                        <p>Email</p>
                        <input type="text" class="ipt">
                        <svg class="ipt-svg" t="1706422441211" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10013" width="128" height="128">
                            <path
                                d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"
                                p-id="10014"></path>
                        </svg>
                    </div>
                    <div class="form-input-item">
                        <p>Username</p>
                        <input type="text" class="ipt">
                        <svg class="ipt-svg" t="1706422441211" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10013" width="128" height="128">
                            <path
                                d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"
                                p-id="10014"></path>
                        </svg>
                    </div>
                    <div class="form-input-item">
                        <p>Password</p>
                        <input type="password" class="ipt">
                        <svg class="ipt-svg" t="1706422409197" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7561" width="128" height="128">
                            <path
                                d="M804.571429 1023.975619 219.428571 1023.975619C165.571048 1023.975619 121.904762 1004.714667 121.904762 950.832762L121.904762 536.356571C121.904762 482.499048 165.571048 438.832762 219.428571 438.832762L219.428571 438.832762 219.428571 292.547048 219.428571 292.547048C219.428571 130.974476 350.403048-0.024381 512-0.024381 673.572571-0.024381 804.571429 130.974476 804.571429 292.547048L804.571429 438.832762C858.428952 438.832762 902.095238 482.499048 902.095238 536.356571L902.095238 950.832762C902.095238 1004.714667 858.428952 1023.975619 804.571429 1023.975619ZM755.809524 292.547048 755.809524 292.547048C755.809524 292.547048 755.809524 292.547048 755.809524 292.547048 755.809524 157.891048 646.631619 48.737524 512 48.737524 377.344 48.737524 268.166095 157.891048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048L268.190476 292.547048 268.190476 438.832762 755.809524 438.832762 755.809524 292.547048ZM853.333333 536.356571C853.333333 509.44 831.488 487.594667 804.571429 487.594667L219.428571 487.594667C192.487619 487.594667 170.666667 509.44 170.666667 536.356571L170.666667 950.832762C170.666667 977.773714 192.487619 975.213714 219.428571 975.213714L804.571429 975.213714C831.488 975.213714 853.333333 977.773714 853.333333 950.832762L853.333333 536.356571ZM536.380952 801.109333 536.380952 877.714286C536.380952 891.172571 525.458286 902.095238 512 902.095238 498.541714 902.095238 487.619048 891.172571 487.619048 877.714286L487.619048 801.109333C445.635048 790.235429 414.47619 752.420571 414.47619 707.023238 414.47619 653.165714 458.142476 609.499429 512 609.499429 565.857524 609.499429 609.52381 653.165714 609.52381 707.023238 609.52381 752.420571 578.364952 790.235429 536.380952 801.109333ZM512 658.261333C485.059048 658.261333 463.238095 680.106667 463.238095 707.023238 463.238095 733.96419 485.059048 755.809524 512 755.809524 538.916571 755.809524 560.761905 733.96419 560.761905 707.023238 560.761905 680.106667 538.916571 658.261333 512 658.261333Z"
                                p-id="7562"></path>
                        </svg>
                    </div>
                    <button class="btn">Regist</button>
                </div>
                <div class="diliver"><span>or</span></div>
                <div class="other-login">
                    <div class="other-login-item">
                        <svg class="other-login-svg" t="1706423206362" class="icon" viewBox="0 0 1260 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11373" width="128" height="128">
                            <path
                                d="M456.861538 0C204.8 0 0 173.292308 0 378.092308c0 118.153846 63.015385 220.553846 165.415385 291.446154 7.876923 7.876923 0 47.261538-15.753847 110.276923 0 7.876923 0 15.753846 7.876924 15.753846s7.876923 7.876923 15.753846 0c78.769231-47.261538 118.153846-70.892308 133.907692-63.015385 47.261538 15.753846 86.646154 23.630769 149.661538 23.630769h39.384616c-23.630769-31.507692-31.507692-70.892308-31.507692-102.4C464.738462 464.738462 645.907692 315.076923 866.461538 315.076923h39.384616C866.461538 141.784615 677.415385 0 456.861538 0zM307.2 322.953846c-39.384615 0-70.892308-31.507692-70.892308-63.015384s31.507692-63.015385 63.015385-63.015385 63.015385 31.507692 63.015385 63.015385-23.630769 63.015385-55.138462 63.015384z m299.323077 0c-31.507692 0-63.015385-31.507692-63.015385-63.015384s31.507692-63.015385 63.015385-63.015385 63.015385 31.507692 63.015385 63.015385-31.507692 63.015385-63.015385 63.015384z"
                                fill="#00BF5E" p-id="11374"></path>
                            <path
                                d="M1260.307692 669.538462c0-173.292308-173.292308-315.076923-378.092307-315.076924-212.676923 0-378.092308 141.784615-378.092308 315.076924s173.292308 315.076923 378.092308 315.076923c47.261538 0 78.769231-7.876923 126.030769-23.63077 7.876923 0 47.261538 15.753846 110.276923 55.138462h15.753846c7.876923 0 7.876923-7.876923 0-15.753846-15.753846-55.138462-23.630769-86.646154-15.753846-94.523077 94.523077-55.138462 141.784615-133.907692 141.784615-236.307692z m-504.123077-55.138462c-31.507692 0-55.138462-23.630769-55.138461-55.138462s23.630769-55.138462 55.138461-55.138461 55.138462 23.630769 55.138462 55.138461-31.507692 55.138462-55.138462 55.138462z m252.061539 0c-31.507692 0-55.138462-23.630769-55.138462-55.138462s23.630769-55.138462 55.138462-55.138461c31.507692 0 55.138462 23.630769 55.138461 55.138461s-23.630769 55.138462-55.138461 55.138462z"
                                fill="#00BF5E" p-id="11375"></path>
                        </svg>
                        <span>WeChat</span>
                    </div>
                    <div class="other-login-item">
                        <svg class="other-login-svg" t="1706423247752" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14028" width="128" height="128">
                            <path
                                d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
                                fill="#FAAD08" p-id="14029"></path>
                            <path
                                d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
                                fill="#FAAD08" p-id="14030"></path>
                            <path
                                d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
                                fill="#000000" p-id="14031"></path>
                            <path
                                d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
                                fill="#000000" p-id="14032"></path>
                            <path
                                d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
                                fill="#FFFFFF" p-id="14033"></path>
                            <path
                                d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
                                fill="#FAAD08" p-id="14034"></path>
                            <path
                                d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
                                fill="#000000" p-id="14035"></path>
                            <path
                                d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
                                fill="#FFFFFF" p-id="14036"></path>
                            <path
                                d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
                                fill="#EB1C26" p-id="14037"></path>
                            <path
                                d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
                                fill="#EB1C26" p-id="14038"></path>
                        </svg>
                        <span>QQ</span>
                    </div>
                </div>
            </div>
            <div class="forgot-pwd-form">
                <h1 class="title">FORGOT PASSWORD</h1>
                <p class="tips">
                    I remember the password now?
                    <span class="tips-span sigin">Sign in</span>
                </p>
                <div class="form-input">
                    <div class="form-input-item">
                        <p>Email</p>
                        <input type="text" class="ipt">
                        <svg class="ipt-svg" t="1706422441211" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10013" width="128" height="128">
                            <path
                                d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"
                                p-id="10014"></path>
                        </svg>
                    </div>
                    <div class="form-input-item">
                        <p>Code</p>
                        <input type="text" class="ipt">
                        <span class="veri-code-tips">Get</span>
                        <svg class="ipt-svg" t="1706428015984" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="15024" width="128" height="128">
                            <path
                                d="M943.1 172c-2.4-0.2-245.1-25.3-413.8-147.8-5.1-3.7-11-5.6-17.3-5.6-6.2 0-12.2 1.9-17.3 5.6C326.9 146 83.3 171.8 80.9 172c-15.2 1.4-26.6 14.1-26.6 29.3 0 6.7 0.6 165.8 54.8 344.4 32.1 105.8 76.4 196.4 131.9 269.2 70.3 92.3 158.5 156 262 189.2 2.9 0.9 5.9 1.4 9 1.4s6.1-0.5 8.9-1.4c103.6-33.2 191.7-96.8 262-189.2 55.4-72.7 99.8-163.2 131.9-269.2 54.1-178.6 54.8-337.7 54.8-344.4C969.7 186.1 958.3 173.5 943.1 172zM910.1 227.2l-0.1 1.6c-2.9 58.1-13.4 174.4-51.4 299.9-66.7 220.1-183.1 360.1-346 416.1L512 945l-0.6-0.2C349 888.9 232.7 749.4 165.8 530.1c-39.8-130.5-49.4-254.2-51.8-301.4l-0.1-1.6 1.5-0.2c70.6-10.3 250.5-44.8 395.5-142.4l0.9-0.7 1 0.7C658 182.1 837.9 216.6 908.5 227L910.1 227.2z"
                                p-id="15025"></path>
                            <path
                                d="M641.8 351 467 580.3l-89-76.1c-5.3-4.5-12.1-7-19.1-7-8.6 0-16.8 3.7-22.4 10.3-10.5 12.3-9.1 31 3.3 41.5l112.7 96.4c5.2 4.4 12.4 7 19.6 7 0.9 0 1.8 0 2.7-0.1 8-0.8 15.4-5 20.3-11.4l193.7-254c4.8-6.3 6.8-14 5.7-21.8-1-7.8-5.1-14.7-11.3-19.5C670.1 335.6 651.6 338.1 641.8 351z"
                                p-id="15026"></path>
                        </svg>
                    </div>
                    <div class="form-input-item">
                        <p>Password</p>
                        <input type="password" class="ipt">
                        <svg class="ipt-svg" t="1706422409197" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7561" width="128" height="128">
                            <path
                                d="M804.571429 1023.975619 219.428571 1023.975619C165.571048 1023.975619 121.904762 1004.714667 121.904762 950.832762L121.904762 536.356571C121.904762 482.499048 165.571048 438.832762 219.428571 438.832762L219.428571 438.832762 219.428571 292.547048 219.428571 292.547048C219.428571 130.974476 350.403048-0.024381 512-0.024381 673.572571-0.024381 804.571429 130.974476 804.571429 292.547048L804.571429 438.832762C858.428952 438.832762 902.095238 482.499048 902.095238 536.356571L902.095238 950.832762C902.095238 1004.714667 858.428952 1023.975619 804.571429 1023.975619ZM755.809524 292.547048 755.809524 292.547048C755.809524 292.547048 755.809524 292.547048 755.809524 292.547048 755.809524 157.891048 646.631619 48.737524 512 48.737524 377.344 48.737524 268.166095 157.891048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048L268.190476 292.547048 268.190476 438.832762 755.809524 438.832762 755.809524 292.547048ZM853.333333 536.356571C853.333333 509.44 831.488 487.594667 804.571429 487.594667L219.428571 487.594667C192.487619 487.594667 170.666667 509.44 170.666667 536.356571L170.666667 950.832762C170.666667 977.773714 192.487619 975.213714 219.428571 975.213714L804.571429 975.213714C831.488 975.213714 853.333333 977.773714 853.333333 950.832762L853.333333 536.356571ZM536.380952 801.109333 536.380952 877.714286C536.380952 891.172571 525.458286 902.095238 512 902.095238 498.541714 902.095238 487.619048 891.172571 487.619048 877.714286L487.619048 801.109333C445.635048 790.235429 414.47619 752.420571 414.47619 707.023238 414.47619 653.165714 458.142476 609.499429 512 609.499429 565.857524 609.499429 609.52381 653.165714 609.52381 707.023238 609.52381 752.420571 578.364952 790.235429 536.380952 801.109333ZM512 658.261333C485.059048 658.261333 463.238095 680.106667 463.238095 707.023238 463.238095 733.96419 485.059048 755.809524 512 755.809524 538.916571 755.809524 560.761905 733.96419 560.761905 707.023238 560.761905 680.106667 538.916571 658.261333 512 658.261333Z"
                                p-id="7562"></path>
                        </svg>
                    </div>
                    <button class="btn">Change Passowrd</button>
                </div>
            </div>
        </div>
        <div class="introduce">
            <div class="nav">
                <ul>
                    <li>HOME</li>
                    <li>TIME</li>
                    <li>SUPPORT</li>
                    <li>CONTACT</li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    const regist = document.querySelector('.regist')
    const forgotPwd = document.querySelector('.forgot-pwd')
    const sigin = document.querySelectorAll('.sigin')
    const registForm = document.querySelector('.regite-form')
    const loginForm = document.querySelector('.login-form')
    const forgotPwdForm = document.querySelector('.forgot-pwd-form')
    const formWrapper = document.querySelector('.form-wrapper')
    const veriCodeTips = document.querySelector('.veri-code-tips');
    let reckonTimeFlag = 5 // 倒计时
    let reckonTime = null // 定时器

    regist.addEventListener('click', function () {
        formWrapper.classList.add('rotate-vert-center')
        setTimeout(() => {
            registForm.style.display = 'block'
            loginForm.style.display = 'none'
        }, 100)
        setTimeout(() => {
            formWrapper.classList.remove('rotate-vert-center')
        }, 500)
    })

    for (let i = 0; i < sigin.length; i++) {
        sigin[i].addEventListener('click', function () {
            formWrapper.classList.add('rotate-vert-center')
            setTimeout(() => {
                registForm.style.display = 'none'
                loginForm.style.display = 'block'
                forgotPwdForm.style.display = 'none'
            }, 100)
            setTimeout(() => {
                formWrapper.classList.remove('rotate-vert-center')
            }, 500)
        })
    }

    forgotPwd.addEventListener('click', function () {
        formWrapper.classList.add('rotate-vert-center')
        setTimeout(() => {
            registForm.style.display = 'none'
            loginForm.style.display = 'none'
            forgotPwdForm.style.display = 'block'
        }, 100)
        setTimeout(() => {
            formWrapper.classList.remove('rotate-vert-center')
        }, 500)
    })

    function countDown() {
        veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`
        reckonTimeFlag--
        if(reckonTimeFlag < 0) {
            clearInterval(reckonTime)
            reckonTimeFlag = 5
            veriCodeTips.innerHTML = 'GET'
            veriCodeTips.style.color = 'rgb(87, 59, 255)'
            veriCodeTips.onclick = veriCodeTipsClick
        }
    }

    function veriCodeTipsClick() {
        veriCodeTips.onclick = null
        veriCodeTips.style.color = "rgb(153, 151, 151)"
        reckonTime = setInterval(countDown, 1000)
        countDown()
    }

    veriCodeTips.addEventListener('click', function() {
        if(!reckonTime) {
            veriCodeTipsClick()
        }
    })
</script>

</html>